<template>
	<div class="scan-box">
		<div class="kongscan"></div>
		<div id="bcid" ref="scan">
			<div>
				<span  @click="androidScan('code')">扫描</span>
				<i  @click="androidScan('code')" class="iconfont icon-sousuoxiawu-"></i>
			</div>
			<!--     <div class="flash-button">
        <img :src="imgSelect">
        <div class="text-bottom">触摸扫码区打开闪光灯</div>
      </div> -->
		</div>
		<div class="input-order-number">
			<img src="../assets/input.png">
			<input type="text" v-model="code" ref='code'  @keyup.enter='commitInput' :placeholder="placeholdertext">
			<div class="button-add" @click="commitInput">确认</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'scan',
		props: ['loadingData', 'switchScan', 'textre', 'deliveryNoSF'],
		data() {
			return {
				codeUrl: '',
				code: '',
				activeFlash: false,
				imgSelect: require('../assets/flash.png'),
				scanState: false,
				placeholdertext: '手动输入子单号...',
			}
		},
		created() {
      		this.$store.state.ScanQRCodeInputName = 'code';
			if (this.textre) {
				this.placeholdertext = this.textre;
			}
			if (this.deliveryNoSF) {
				this.code = this.deliveryNoSF;
				this.$emit('scanData', this.code)
			}
		},
		mounted() {
			this.$refs['code'].focus();
		},
		methods: {
			// 接收iOS/android值
			QRScanAjax(qrcode) {
				let inputName = this.$store.state.ScanQRCodeInputName;
				this[inputName] = qrcode;
				this.commitInput();
			},
			/**
			 * 提交输入框输入的内容
			 **/
			commitInput() {
				if (this.code !== '') {
					this.code = ''
					this.$emit('scanData', this.code)
				}
			},
			/**
			 * 创建扫描控件时候调用的方法
			 */
			startRecognize() {
				let that = this;
				that.$emit('scanData', '') // 把获取到的条形码传给父组件
			}
		}
	}
</script>
<style scoped lang="less">
	@import "publicLess.less";
	.scan-box {
		background-color: rgba(0, 0, 0, 0.0);
		.kongscan {
			width: 100%;
			height: 90/50rem;
		}
	}
	.scan-box {
		width: 100%;
		height: 280/50rem;
		z-index: 1;
	}
	#bcid {
		width: 100%;
		// height: 245px;
		height: 140px;
		z-index: 8888;
		background-color: #f4f4f4;
		& > div {
		width: 100%;
		height: 104px;
		// height: 224px;
		font-size: 32/50rem;
		text-align: center;
		color: @PublicColor;
		// line-height: 224px;
		line-height: 104px;
		span {
			margin-right: 10/50rem;
		}
		i {
			font-size: 35/50rem;
		}
		}
	}
	// #bcid {
	// 	width: 100%;
	// 	height: 110/50rem;
	// 	background-color: #f4f4f4;
	// 	&>div {
	// 		width: 100%;
	// 		height: 110/50rem;
	// 		font-size: 32/50rem;
	// 		text-align: center;
	// 		color: @PublicColor;
	// 		line-height: 110/50rem;
	// 		span {
	// 			margin-right: 10/50rem;
	// 		}
	// 		i {
	// 			font-size: 35/50rem;
	// 		}
	// 	}
	// }
	.scan {
		height: 100%;
	}
	.input-order-number {
		width: 100%;
		display: flex;
		position: absolute;
		bottom: 0;
		flex-wrap: nowrap;
		background-color: #F4F4F4;
	}
	.input-order-number img {
		width: 80/50rem;
		padding: 12/50rem;
		box-sizing: border-box;
		height: 80/50rem;
		line-height: 80/50rem;
	}
	.input-order-number input {
		flex: 1;
		border: none;
		line-height: 76/50rem;
		height: 76/50rem;
		padding-left: 10/50rem;
		box-sizing: border-box;
		outline: none;
	}
	.input-order-number .button-add {
		width: 76/50rem;
		height: 76/50rem;
		font-size: 28/50rem;
		line-height: 80/50rem;
		margin: 0 10/50rem;
		text-align: center;
		background-color: @PublicColor;
		border-radius: 50%;
		color: #fff;
		cursor: pointer;
	}
</style>